<template>
  <view class="exam-answers">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }">
      <text class="time">{{ currentTime }}</text>
      <view class="status-icons">
        <text class="fa fa-signal"></text>
        <text class="fa fa-wifi"></text>
        <text class="fa fa-battery-full"></text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">答案解析</text>
      <view class="nav-filter" @tap="showFilter">
        <text class="fa fa-filter"></text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="page-content">
      <!-- 答题总览 -->
      <view class="section">
        <view class="summary-card">
          <view class="summary-header">
            <text class="summary-title">答题总览</text>
            <text class="summary-score">85分</text>
          </view>
          <view class="summary-stats">
            <view class="summary-item">
              <text class="stat-number">25</text>
              <text class="stat-label">总题数</text>
            </view>
            <view class="summary-item">
              <text class="stat-number green">21</text>
              <text class="stat-label green">答对</text>
            </view>
            <view class="summary-item">
              <text class="stat-number red">4</text>
              <text class="stat-label red">答错</text>
            </view>
            <view class="summary-item">
              <text class="stat-number gray">0</text>
              <text class="stat-label gray">未答</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 筛选标签 -->
      <view class="section-tabs">
        <view class="tabs-container">
          <view
            :class="['tab-item', currentTab === 0 ? 'active' : '']"
            @tap="switchTab(0)"
          >
            <text class="tab-text">全部</text>
          </view>
          <view
            :class="['tab-item', currentTab === 1 ? 'active' : '']"
            @tap="switchTab(1)"
          >
            <text class="tab-text">答错题</text>
          </view>
          <view
            :class="['tab-item', currentTab === 2 ? 'active' : '']"
            @tap="switchTab(2)"
          >
            <text class="tab-text">收藏题</text>
          </view>
        </view>
      </view>

      <!-- 题目列表 -->
      <view class="questions-section">
        <view class="questions-container">
          <!-- 问题1 - 答对 -->
          <view class="question-card correct">
            <view class="question-header">
              <text class="question-number">第1题</text>
              <view class="question-actions">
                <text class="question-tag correct">答对</text>
                <text
                  :class="[
                    'fa',
                    questions[0].starred ? 'fa-star' : 'fa-star-o',
                  ]"
                  @tap="toggleStar(0)"
                ></text>
              </view>
            </view>
            <view class="question-content">
              <text class="question-text"
                >医疗器械消毒中，高温蒸汽灭菌的标准温度和时间是？</text
              >
            </view>
            <view class="options-list">
              <view class="option-item">
                <text class="option-label">A</text>
                <text class="option-text">100℃，30分钟</text>
              </view>
              <view class="option-item correct">
                <text class="option-label correct">B</text>
                <text class="option-text correct">121℃，15分钟</text>
                <text class="fa fa-check"></text>
              </view>
              <view class="option-item">
                <text class="option-label">C</text>
                <text class="option-text">80℃，60分钟</text>
              </view>
              <view class="option-item">
                <text class="option-label">D</text>
                <text class="option-text">60℃，120分钟</text>
              </view>
            </view>
            <view class="analysis-box">
              <view class="analysis-header">
                <text class="analysis-icon">💡</text>
                <text class="analysis-title">解析</text>
              </view>
              <text class="analysis-text"
                >高温蒸汽灭菌是最常用的灭菌方法，标准条件为121℃下保持15分钟，能够杀灭所有微生物包括芽孢。这是医疗器械消毒的金标准。</text
              >
            </view>
          </view>

          <!-- 问题2 - 答错 -->
          <view class="question-card wrong">
            <view class="question-header">
              <text class="question-number">第3题</text>
              <view class="question-actions">
                <text class="question-tag wrong">答错</text>
                <text
                  :class="[
                    'fa',
                    questions[1].starred ? 'fa-star' : 'fa-star-o',
                  ]"
                  @tap="toggleStar(1)"
                ></text>
              </view>
            </view>
            <view class="question-content">
              <text class="question-text"
                >以下哪种消毒剂对病毒具有最强的杀灭效果？</text
              >
            </view>
            <view class="options-list">
              <view class="option-item correct">
                <text class="option-label correct">A</text>
                <text class="option-text correct">75%乙醇</text>
                <text class="fa fa-check"></text>
              </view>
              <view class="option-item wrong">
                <text class="option-label wrong">B</text>
                <text class="option-text wrong">0.5%氯己定</text>
                <text class="cross-icon">❌</text>
              </view>
              <view class="option-item">
                <text class="option-label">C</text>
                <text class="option-text">3%双氧水</text>
              </view>
              <view class="option-item">
                <text class="option-label">D</text>
                <text class="option-text">0.2%苯扎氯铵</text>
              </view>
            </view>
            <view class="analysis-box">
              <view class="analysis-header">
                <text class="analysis-icon">💡</text>
                <text class="analysis-title">解析</text>
              </view>
              <text class="analysis-text"
                >75%乙醇对病毒具有强效杀灭作用，能够破坏病毒包膜和蛋白质结构。氯己定主要对细菌有效，对病毒的杀灭效果相对较弱。</text
              >
              <view class="mistake-tip">
                <view class="tip-header">
                  <text class="tip-icon">⚠️</text>
                  <view class="tip-content">
                    <text class="tip-title">易错点</text>
                    <text class="tip-text"
                      >注意区分不同消毒剂的适用范围，乙醇对病毒效果最佳。</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 问题3 - 答对（已收藏） -->
          <view class="question-card correct">
            <view class="question-header">
              <text class="question-number">第5题</text>
              <view class="question-actions">
                <text class="question-tag correct">答对</text>
                <text
                  :class="[
                    'fa',
                    questions[2].starred ? 'fa-star' : 'fa-star-o',
                    'starred',
                  ]"
                  @tap="toggleStar(2)"
                ></text>
              </view>
            </view>
            <view class="question-content">
              <text class="question-text"
                >手术器械的清洗应在污染后多长时间内完成？</text
              >
            </view>
            <view class="options-list">
              <view class="option-item">
                <text class="option-label">A</text>
                <text class="option-text">24小时内</text>
              </view>
              <view class="option-item">
                <text class="option-label">B</text>
                <text class="option-text">12小时内</text>
              </view>
              <view class="option-item correct">
                <text class="option-label correct">C</text>
                <text class="option-text correct">6小时内</text>
                <text class="fa fa-check"></text>
              </view>
              <view class="option-item">
                <text class="option-label">D</text>
                <text class="option-text">2小时内</text>
              </view>
            </view>
            <view class="analysis-box">
              <view class="analysis-header">
                <text class="analysis-icon">💡</text>
                <text class="analysis-title">解析</text>
              </view>
              <text class="analysis-text"
                >手术器械应在使用后6小时内进行清洗，超过这个时间血液和组织残留物会干燥凝固，增加清洗难度，影响后续消毒效果。</text
              >
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTime: "09:41",
      currentTab: 0,
      questions: [
        { id: 1, starred: false },
        { id: 2, starred: false },
        { id: 3, starred: true },
      ],
    };
  },
  onLoad() {
    this.initStatusBar();
    this.updateTime();
  },
  methods: {
    initStatusBar() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}`;
    },
    goBack() {
      uni.navigateBack();
    },
    showFilter() {
      uni.showToast({
        title: "筛选功能",
        icon: "none",
      });
    },
    switchTab(index) {
      this.currentTab = index;
    },
    toggleStar(index) {
      this.questions[index].starred = !this.questions[index].starred;
    },
    navigateToHome() {
      uni.switchTab({
        url: "/pages/home",
      });
    },
    navigateToProfile() {
      uni.switchTab({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.exam-answers {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #9ca3af;
  background-color: #ffffff;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

.icon {
  font-size: 24rpx;
}

.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
}

.nav-back {
  position: absolute;
  left: 32rpx;
  padding: 8rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.nav-filter {
  position: absolute;
  right: 32rpx;
  padding: 8rpx;
}

.filter-icon {
  font-size: 32rpx;
  color: #6b7280;
}

.page-content {
  height: calc(100vh - 88rpx - 120rpx);
}

.section {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

.summary-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.summary-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.summary-score {
  font-size: 28rpx;
  font-weight: 600;
  color: #10b981;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  text-align: center;
}

.summary-item {
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-number {
  font-size: 36rpx;
  font-weight: 700;
  color: #111827;
}

.stat-number.green {
  color: #10b981;
}

.stat-number.red {
  color: #ef4444;
}

.stat-number.gray {
  color: #6b7280;
}

.stat-label {
  font-size: 24rpx;
  color: #6b7280;
}

.stat-label.green {
  color: #047857;
}

.stat-label.red {
  color: #b91c1c;
}

.stat-label.gray {
  color: #374151;
}

.section-tabs {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

.tabs-container {
  display: flex;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  border-bottom: 1rpx solid #e5e7eb;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  text-align: center;
}

.tab-text {
  font-size: 28rpx;
  color: #6b7280;
}

.tab-item.active {
  border-bottom: 4rpx solid #2563eb;
}

.tab-item.active .tab-text {
  color: #2563eb;
  font-weight: 600;
}

.questions-section {
  padding: 0 32rpx;
}

.questions-container {
  background-color: #ffffff;
  border-radius: 0 0 32rpx 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border-left: 1rpx solid #f3f4f6;
  border-right: 1rpx solid #f3f4f6;
  border-bottom: 1rpx solid #f3f4f6;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.question-card {
  border-radius: 32rpx;
  padding: 32rpx;
}

.question-card.correct {
  background-color: #f0fdf4;
  border: 1rpx solid #86efac;
}

.question-card.wrong {
  background-color: #fef2f2;
  border: 1rpx solid #fca5a5;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.question-number {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.question-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.question-tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
}

.question-tag.correct {
  background-color: #d1fae5;
  color: #047857;
}

.question-tag.wrong {
  background-color: #fecaca;
  color: #b91c1c;
}

.star-icon {
  font-size: 32rpx;
  color: #9ca3af;
}

.star-icon.starred {
  color: #f59e0b;
}

.question-content {
  margin-bottom: 24rpx;
}

.question-text {
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.6;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.option-item.correct {
  background-color: #d1fae5;
  border: 1rpx solid #86efac;
}

.option-item.wrong {
  background-color: #fecaca;
  border: 1rpx solid #f87171;
}

.option-label {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f3f4f6;
  color: #6b7280;
}

.option-label.correct {
  background-color: #059669;
  color: #ffffff;
}

.option-label.wrong {
  background-color: #dc2626;
  color: #ffffff;
}

.option-text {
  font-size: 28rpx;
  color: #374151;
  flex: 1;
}

.option-text.correct {
  color: #065f46;
  font-weight: 500;
}

.option-text.wrong {
  color: #991b1b;
  font-weight: 500;
}

.check-icon {
  color: #059669;
  font-size: 32rpx;
  font-weight: 700;
}

.cross-icon {
  font-size: 28rpx;
}

.analysis-box {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
}

.analysis-header {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.analysis-icon {
  font-size: 32rpx;
  margin-top: 4rpx;
}

.analysis-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1e40af;
}

.analysis-text {
  font-size: 28rpx;
  color: #374151;
  line-height: 1.6;
  display: block;
}

.mistake-tip {
  margin-top: 16rpx;
  background-color: #fef3c7;
  border: 1rpx solid #fbbf24;
  border-radius: 16rpx;
  padding: 16rpx;
}

.tip-header {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.tip-icon {
  font-size: 32rpx;
  margin-top: 4rpx;
}

.tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.tip-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #92400e;
  display: block;
}

.tip-text {
  font-size: 24rpx;
  color: #b45309;
  line-height: 1.5;
  display: block;
}

.bottom-space {
  height: 48rpx;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 0;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #6b7280;
}

.tab-item.active .tab-text {
  color: #2563eb;
  font-weight: 500;
}
</style>
